import styled from 'styled-components'
export const HeaderCategory =styled.div`
 height:3rem;
 background:#ee742f;
 display:flex;
 align-items:center;
 justify-content:center;
 ul{
   width:8rem;
   height:2.4rem;
   display:flex;
   position:relative;
   border:1px solid #fff;
   border-radius:1rem
  z-index:0;
   
 }
 li{
  flex:1;
  line-height:2.4rem;
  text-align:center;
  color:#fff;
  font-size:20px;
  
  &:last-child{
    position:absolute;
    border-radius:1rem;
    width:50%;
    height:2.4rem;
    background:#fff;
    z-index:-1;
    transform:translate(0,0);
    transition:all 0.4s ease-in;
    &.right{
      transform:translate(100%,0)
    }
  }
  &.active{
    background:#fff;
    color:#ee742f;
  }
}
`
export const CateWrap=styled.div`
    height:100%;
    overflow:hidden;
`
export const CateBodyWrap=styled.div`
    height:100%;
    display:flex;
    font-size:18px;
    .left{
      width:7rem;
      height:100%;
      overflow-y:auto;
      li{
        height:3.5rem;
        line-height:3.5rem;
        text-align:center;
        bacground:#f3f3f3;
        &.active{
          background:#fff;
          span{
            display:inline-block;
            height:100%;
            border-bottom:2px solid orange;
          }
        }
      }
    }
    .right{
      flex:1;
      height:100%;
      background:#fff;
      ul{
        padding:0.5rem;
        display:flex;
        flex-wrap:wrap;
        height:100%;
        align-content:flex-start;
        li{
          border:1px solid orange;
          width:33%;
          height:2rem;
          margin:0 8px 8px 8px;
          line-height:2rem;
          text-align:center;
          color:#666;
      }
      
    }
`